<script setup>
import { defineProps } from 'vue';

// 使用 defineProps 定义 props
const props = defineProps({
  course: {
    type: Object,
    required: true,
  },
});

// 注意：在 <script setup> 中，props 会自动暴露给模板，无需 return
</script>

<template>
  <el-card class="course-card">
    <img :src="course.imgUrl" class="course-image" alt="Course Image">
    <div slot="header" class="clearfix">
      <span>{{ course.name }}</span>
    </div>
    <div>{{ course.intro }}</div>
    <div>上课时间: {{ course.startTime }}</div>
    <div>下课时间: {{ course.endTime }}</div>
  </el-card>
</template>
<style scoped>
.course-card {
  /* 宽度和高度应该根据你的布局需求来设置 */
  width: 200px; /* 示例值，你可能需要调整 */
  height: auto; /* 让卡片高度根据内容自动调整 */
}
.course-image {
  width: 100%; /* 图片宽度占满卡片 */
  height: auto; /* 保持图片的原始宽高比 */
}
</style>